
<template>
  <el-menu class="h-full flex flex-col" :default-active="menuActiveIndex" @select="handlerSelect">
    <div class="h-[90%]">
      <el-menu-item-group>
        <template #title>
          <div>文件筛选</div>
        </template>
        <el-menu-item index="0" name="all">
          <el-icon>
            <House />
          </el-icon>
          全部文件
        </el-menu-item>
        <el-menu-item index="1" name="image">
          <el-icon>
            <PictureFilled />
          </el-icon>
          图片
        </el-menu-item>
        <el-menu-item index="2">
          <el-icon>
            <VideoCameraFilled />
          </el-icon>
          视频
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <Headset />
          </el-icon>
          音乐
        </el-menu-item>
        <el-menu-item index="4">
          <el-icon>
            <Document />
          </el-icon>
          文本
        </el-menu-item>
      </el-menu-item-group>
    </div>
    <div class="h-[10%]  flex flex-col p-3">
      <el-progress :percentage="percentage" :color="customColors" :stroke-width="15" :show-text="false" />
      <div class="flex justify-between items-center h-10">
        <span class="text-gray-300">总共：{{totalSize}}</span>
        <span class="text-yellow-400">已用：{{usedSize}}</span>
      </div>
    </div>
  </el-menu>
</template>


<script lang="ts" setup>
import { computed } from 'vue'
import userStore from '@/stores/user'
import fileStore from '@/stores/file'
import { byteToSize } from '@/utils/utils'

const customColors = [
  { color: '#5cb87a', percentage: 20 },
  { color: '#e6a23c', percentage: 80 },
  { color: '#f56c6c', percentage: 100 },
]

const typeList = ['all', 'image', 'video', 'mp3', 'text']

const Store = userStore()
const FileStore = fileStore()

const percentage = computed(() => {
  if (Store.total_size === 0) {
    return 0
  }
  return Math.ceil((Store.used_size / Store.total_size) * 100)
})
const usedSize = computed(() => byteToSize(Store.used_size))
const totalSize = computed(() => byteToSize(Store.total_size))

const menuActiveIndex = computed(() => Store.activeMenu)
const file_id = computed(() => {
  const len = Store.dirs.length
  if (len === 0) {
    return 0
  }
  return (Store.dirs[len - 1] as any).id
})


const handlerSelect = (index: number) => {
  Store.$patch({
    activeMenu: index
  })
  if (index <= 4) {
    const type = typeList[index]
    Store.$patch({
      activeMenu: index
    })
    FileStore.changeType(type)
    FileStore.getFileList({ file_id: file_id.value })
  }

}
</script>

<style lang="scss" scoped>
.el-menu-item-group__title {
  padding: none !important;
}
</style>